<template>
  <div class="type-box">
    <div class="type-title">
      <span class="c-font-16 c-font-b">设置类型</span>
    </div>
    <div
      :class="current === index ? 'type-item' : 'default'"
      v-for="(item, index) in list"
      :key="index"
      @click="change(index, item)"
      :style="{ color: current === index ? activeColor : '' }"
    >
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TypeCard",
  props: {
    activeColor: {
      type: String,
      default: "#0074DF",
    },
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      //当前选中下标
      current: 0,
      list: [
        {
          name: "部门职能",
        },
        {
          name: "员工职位",
        },
        {
          name: "员工级别",
        },
        {
          name: "离职原因",
        },
      ],
    };
  },
  mounted() {
    console.log(this.current);
    this.change(0, this.list[0]);
  },
  methods: {
    change(index, item) {
      if (this.current != index) {
        this.current = index;
        this.$emit("change", index, item.name);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.type-box {
  width: 349px;
  opacity: 1;
  border-radius: 6px;
  background: #ffffff;
  padding: 20px 12px;
  height: calc(100vh - 220px);
  overflow-y: auto;
  .type-item {
    position: relative;
    width: 100%;
    color: #666666;
    text-align: center;
    line-height: 46px;
    margin: 10px 0;
    height: 46px;
    border-radius: 4px;
    background: #f9f9f9;
    :before {
      content: "";
      width: 5px;
      height: 46px;
      background: #0074df;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px 0px 0px 4px;
    }
    :hover {
      cursor: pointer;
    }
  }
  .default {
    position: relative;
    width: 100%;
    color: #666666;
    text-align: center;
    line-height: 46px;
    margin: 10px 0;
    height: 46px;
    border-radius: 4px;
    background: #f9f9f9;
    :hover {
      cursor: pointer;
    }
  }
}
</style>
